<template>
    <div>
        <div :style='{ "padding": "20px 7%", "margin": "0px auto", "borderColor": "#ddd", "borderRadius": "0px", "background": "none", "borderWidth": "0 0 1px", "width": "100%", "borderStyle": "solid" }'
            class="breadcrumb-preview">
            <el-breadcrumb :separator="'Ξ'" :style='{ "fontSize": "14px", "lineHeight": "1" }'>
                <el-breadcrumb-item class="item1" to="/"><a>首页</a></el-breadcrumb-item>
                <el-breadcrumb-item class="item2" v-for="(item, index) in breadcrumbItem" :key="index"><a>{{ item.name
                        }}</a></el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="list-preview">
            <div class="list-content">
                <el-image :src="require('../../assets/lvyou.jpeg')"
                    style="width: 100%;height: 100%;border-radius: 30px;"></el-image>
            </div>
            <div class="list-content" style="margin-left: 50px;">
                <div class="title">旅游的魅力在于它能够让我们跳出舒适区，去尝试新事物，去感受不同的风土人情。</div>
                <div class="content">
                    中国的景观旅游资源相当丰富。这些风景名胜区从不同的角度可以有不同的划分，以其主要景观的不同，大体上可分为如下五种类型：1.湖泊风景区（白洋淀、杭州西湖、南京玄武湖、武汉东湖、新疆天山天池、青海湖、丹江口水库）2.山岳风景区（黄山、燕山、泰山、衡山、华山、紫金山、阿里山）3.森林风景区(西双版纳、湖南张家界、河南宝天曼、四川卧龙、湖北神农架) 4.山水风景区(桂林漓江、长江三峡、武夷九曲溪) 5.海滨风景区(海南天涯海角、厦门、大连)。
                </div>
                <div class="goPage" @click="openPage">立即启程 ></div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    //数据集合
    data() {
        return {
            centerType: false
        }
    },
    created() {
        if (this.$route.query.centerType) {
            this.centerType = true
        }
    },
    //方法集合
    methods: {
        openPage() {
            this.$router.push('/index/travel')
        }
    }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.list-preview {
    display: flex;
    width: 86%;
    margin: 30px auto;
    align-items: center;
}

.title {
    font-size: 48px;
    font-weight: 700;
}

.list-content {
    flex: 1;

}

.content {
    font-size: 17px;
    margin-top: 20px;
}

.goPage {
    color: rgb(0, 102, 204);
    cursor: pointer;
    font-size: 17px;
    margin-top: 50px;
}
</style>